<template>
    <div class="page-error" @click="refresh">
        <slot name="logo">
            <img src="../assets/page-error.gif" class="logo">
        </slot>
        <slot name="text">
            <p class="text">网络异常,<label>点击刷新</label></p>
        </slot>
    </div><!-- end page-error -->
</template>
<script>
export default {
    name:'page-error',
    methods:{
        refresh(){
            this.$emit('refresh');
        }
    },
    mounted(){
        document.getElementById('app').classList.add('page-error-wrap')
    },
    destroyed(){
        document.getElementById('app').classList.remove('page-error-wrap')
    }
}
</script>
<style lang="less">
.page-error-wrap {
    position: absolute;;
    top:0;
    left:0;
    bottom:0;
    right:0;
    display: flex;
    flex-direction: column;
}
.page-error {
    display:flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex:1;
    .logo {
        display: block;
        width:697px;
        height:226px;
        margin:0 auto;
    
    }
    .text {
        color:#c6c6c6;
        font-size:34px;

        label {
            color:#e64a19;
        }
    }
}
</style>
